সিএসএস(৩) 3D ট্রান্সফর্মেশন এর মাধ্যমে একটি এলিমেন্টেকে ত্রিমাত্রিকভাবে পরিবর্তন করা যায়।
এই অধ্যায়ে আপনি নিম্নলিখিত 3D ট্রান্সফর্ম মেথড সম্পর্কে জানতে পারবেনঃ
rotateX()
মেথড একট এলিমেন্টকে প্রদত্ত ডিগ্রী অনুসারে তার X-অক্ষের চারপাশে ঘুরাবেঃ
rotateY()
মেথড একট এলিমেন্টকে প্রদত্ত ডিগ্রী অনুসারে তার Y-অক্ষের চারপাশে ঘুরাবেঃ
rotateZ()
মেথড একট এলিমেন্টকে প্রদত্ত ডিগ্রী অনুসারে তার Z-অক্ষের চারপাশে ঘুরাবেঃ
<!DOCTYPE html>
<html>
<head>
<title>css 3d transform</title>
<style>
div{
width: 80%;
height: auto;
background-color: orange;
border: 2px dotted red;
}
#three-d-box-x {
transform: rotateX(170deg);
}
#three-d-box-y {
transform: rotateY(170deg);
}
#three-d-box-z {
transform: rotateZ(170deg);
}
</style>
</head>
<body>
<div>এটি একটি স্বাভাবিক div এলিমেন্ট</div>
<h2>rotateX() মেথড এর ব্যবহার।</h2>
<div id="three-d-box-x">এই div এলিমেন্টকে X-অক্ষের সাপেক্ষে 170 ডিগ্রি কোণে ঘুরানো হয়েছে।</div>
<h2>rotateY() মেথড এর ব্যবহার।</h2>
<div id="three-d-box-y">এই div এলিমেন্টকে Y-অক্ষের সাপেক্ষে 170 ডিগ্রি কোণে ঘুরানো হয়েছে।</div>
<h2>rotateZ() মেথড এর ব্যবহার।</h2>
<div id="three-d-box-z">এই div এলিমেন্টকে Z- অক্ষের সাপেক্ষে 170 ডিগ্রি কোণে ঘুরানো হয়েছে।</div>
<p><b>নোট :</b> ইন্টারনেট এক্সপ্লোরার ৯
এবং এর আগের ভার্সনে rotate() মেথড সাপোর্ট করে না।</p>
</body>
</html>
Read more